<template>
  <div>
    <div class="moreContent">
      <ul class="moreLeft" ref="lileft">
        <li
          v-for="(item,index) in tabClassifyArr"
          :key="index"
          :class="tabClassifyTit==item?'typeActive':''"
          @click="tabClk(item,index)"
        >{{item}}</li>
      </ul>
      <div class="moreRight">
        <!-- 职业技能职业 -->
        <ul class="zhiye dis_block">
          <li @click="allFn">全部</li>
          <li>健康管理师</li>
        </ul>
        <!-- 中药学 -->
        <ul class="zhongyaoxue">
          <li @click="allFn">全部</li>
          <li>中药学专业知识(一)</li>
          <li>中药学专业知识(二)</li>
          <li>中药学综合知识与技能</li>
        </ul>
        <!-- 药学 -->
        <ul class="yaoxue">
          <li @click="allFn">全部</li>
          <li>药学专业知识(一)</li>
          <li>药学专业知识(二)</li>
          <li>药学综合知识与技能</li>
        </ul>
        <!-- 法规 -->
        <ul class="zhiye">
          <li @click="allFn">全部</li>
          <li>药事管理与法规</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { setMajor } from "@/utils/cookies.js";

export default {
  data() {
    return {
      tabClassifyArr: ["职业技能鉴定", "中药学", "药学", "法规"],
      tabClassifyTit: "职业技能鉴定",
    };
  },
  methods: {
    allFn() {
      if (this.tabClassifyTit == "职业技能鉴定") {
        return;
      }
      setMajor(this.tabClassifyTit);
      this.$router.push({ name: "MainMajor" });
    },
    tabClk(item, index) {
      this.tabClassifyTit = item;
      let mainUl = document.querySelectorAll(".moreRight>ul");
      for (let i = 0; i < mainUl.length; i++) {
        mainUl[i].style.display = "none";
      }
      mainUl[index].style.display = "block";
    },
  },
};
</script>

<style scoped src="../.././css/main.css"></style>
<style scoped src="../.././css/main/same.css"></style>
<style scoped src="../.././css/main/iconfont.css"></style>
<style scoped src="../.././css/main/mainmorecont.css"></style>

<style scoped>
</style>